<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>活动详情</span>
          <el-button @click="handleBack">返回</el-button>
        </div>
      </template>

      <el-descriptions :column="2" border>
        <el-descriptions-item label="活动名称">{{
          detail.title
        }}</el-descriptions-item>
        <el-descriptions-item label="活动地点">{{
          detail.location
        }}</el-descriptions-item>
        <el-descriptions-item label="开始时间">{{
          dayjs(detail.startTime).format("YYYY-MM-DD HH:mm:ss")
        }}</el-descriptions-item>
        <el-descriptions-item label="结束时间">{{
          dayjs(detail.endTime).format("YYYY-MM-DD HH:mm:ss")
        }}</el-descriptions-item>
        <el-descriptions-item label="最大参与人数">{{
          detail.maxParticipants
        }}</el-descriptions-item>
        <el-descriptions-item label="当前参与人数">{{
          detail.currentParticipants
        }}</el-descriptions-item>
        <el-descriptions-item label="活动描述" :span="2">
          <div class="content">{{ detail.description }}</div>
        </el-descriptions-item>
      </el-descriptions>

      <!-- 报名记录 -->
      <div
        v-if="detail.registrations && detail.registrations.length > 0"
        class="registration-section"
      >
        <h3>报名记录</h3>
        <el-table :data="detail.registrations" style="width: 100%">
          <el-table-column prop="username" label="报名人" />
          <el-table-column prop="email" label="联系邮箱" />
          <el-table-column prop="registeredAt" label="报名时间" width="180">
            <template #default="scope">
              {{ dayjs(scope.row.registeredAt).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import dayjs from "dayjs";
import { getEvent } from "@/api/event";

const route = useRoute();
const router = useRouter();

// 详情数据
const detail = ref({});

// 获取详情
const getDetail = async () => {
  try {
    const res = await getEvent(route.params.id);
    detail.value = res;
  } catch (error) {
    console.error("获取活动详情失败:", error);
  }
};

// 返回按钮
const handleBack = () => {
  router.push(
    userInfo.value.role == "admin" ? "/event/list" : "/user/event/list"
  );
};
// 用户信息
const userInfo = ref({
  username: "",
  role: "",
});

onMounted(() => {
  // 获取用户信息
  onMounted(() => {
    const userInfoStr = localStorage.getItem("userInfo");
    if (userInfoStr) {
      userInfo.value = JSON.parse(userInfoStr);
    }
  });

  getDetail();
});
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content {
  white-space: pre-wrap;
  line-height: 1.5;
}
.registration-section {
  margin-top: 30px;
}
</style>
